<template>
    <div class="wangeditor-body">
        <div v-wangeditor></div>
    </div>
</template>

<script>
    require('./js/wangEditor');
    module.exports = {
        data: function () {
            return {
                htmlContent: '<p>请输入...</p>',
                editor: {}
            }
        },
        created: function () {
            this.htmlContent = this.parentHtml;
        },
        directives: {
            wangeditor: {
                bind: function () {
                    // 初始化编辑器样式
                    this.el.style.height = "540px";
                },
                update: function () {
                    var _this = this.vm;
                    // 获取DOM节点
                    var self = this.el;
                    // 阻止输出log
                    wangEditor.config.printLog = false;
                    // 生成编辑器
                    _this.editor = new wangEditor(self);
                    // 配置图片上传URL
                    _this.editor.config.uploadImgUrl = "/api/planb/editorUpload";
                    // 配置图片上传名称
                    _this.editor.config.uploadImgFileName = 'files';

                    // bold 是菜单的id，所有菜单的id，可在自定义菜单的文档中找到
                    // 加载配置文件
                    var config = require('./js/wangConfig');
                    _this.editor.UI.menus = config.menus;
                    _this.editor.config.menus = [
                        'source',
                        'bold',
                        'underline',
                        'italic',
                        'eraser',
                        'quote',
                        'fontfamily',
                        'fontsize',
                        'head',
                        'alignleft',
                        'aligncenter',
                        'alignright',
                        'link',
                        'unlink',
                        'emotion',
                        'img'
                    ];
                    // 配置自定义表情，在 create() 之前配置
                    _this.editor.config.emotions = config.emotions;

                    // 配置 onchange 事件
                    _this.editor.onchange = function () {
                        // 编辑区域内容变化时
                        _this.htmlContent = this.$txt.html();
                        // 派发事件，事件沿着父链冒泡
                        _this.$dispatch('editor-dispatch', _this.htmlContent);
                    };

                    _this.editor.create();
                    // 初始化编辑器的内容
                    _this.editor.$txt.html( _this.htmlContent );
                    // 监听父组件派发的信息
                    _this.$on('editor',function (msg) {
                        _this.editor.$txt.html( msg );
                    });
                }
            }
        },
        relady: function () {

        }
    }
</script>

<style lang="less">

    .wangeditor-body {
        width: 100%;
        @import "./css/wangEditor.less";
    }

</style>